<template>
	<view style="border-top: 1px solid #eee;">
		<view class="like-list" >
			<view class="like-item" v-for="(item,index) in likeList" :key="index" @click="product(item._id)">
				<view class="like-image">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
				<view class="like-right">
					<view class="like-title">{{item.name}}</view>
					<view class="like-price">
						<text class="price">{{item.price}}</text>
					</view>
				</view>
			</view>
			<view class="o_none" v-show="likeList.length==0">
				暂无更多
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				host:'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http',
				likeList:[]//收藏列表
			}
		},
		mounted() {
			this.getSearchList()
		},
		methods: {
			getSearchList(){
				let uid=uni.getStorageSync('uid')
				uni.request({
					method:'POST',
					data:{
						uid,
						skip:0,//从哪个数据开始拿
						limit:10,//一次拿几个数据
					},
					url:this.host+'/api/get_fav_list',
					success:(res)=> {
						console.log(res);
						if(uid==''||res.data.code==0){
							uni.$u.toast(res.data.msg)
						}
						else if(res.data.code==1){
							this.likeList=res.data.data
							console.log(this.likeList);
						}
						console.log(this.likeList);
						
					}
				})
			},
			// 跳转到详情页
			product(_id){
				uni.navigateTo({
					url: '/pages/product/product?goods_id='+_id
				})
				// wx.navigateTo() 保留当前页面，跳转到指定页面 可以返回到原页面
			}
		}
	}
</script>

<style lang="scss">
	// 暂无更多
	.o_none{
		padding-top: 30%;
		text-align: center;
		color: #999999;
	}
	/* 收藏列表 */
.like-list{
	background: #fff;
	margin: 0 10px;
	.like-item{
		height: 80px;
		align-items: center;
		margin: 10px;
		display:flex;
		justify-content: space-between;
		.like-image{
			width: 78px;
			height: 78px;
			box-shadow:0 0 6px 0.3px #eeeeee;
			text-align: center;
			image{
				width: 78px;
				height: 78px;
				border-radius: 4px;
			}
		}
		.like-right{
			width: 68%;
			height: 80px;
			border-bottom: 1px solid #e3e3e3;
			display: flex;
			flex-direction: column;//转换主轴至y轴
			justify-content: space-between;//主轴两边分布
			.like-title{
				font-size: $font-lg;
				color: $font-color-dark;
				margin-top: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 将对象作为弹性伸缩盒子模型显示 */
				display: -webkit-box;
				/* 限制在一个块元素显示的文本的行数 */
				/* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
				-webkit-line-clamp: 2;
				/* 设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-box-orient: vertical;
			}
			.like-price{
				font-size: 16px;
				margin-bottom: 3px;
				color: $font-color-light;
				.price{
					font-size: $font-lg;
					color: $uni-color-primary;
					line-height: 1;
					&:before{
						content: '￥';
						font-size: 14px;
					}
				}
			}
		}
	}
}
</style>
